import { useCallback, useEffect, useState } from 'react';
import styles from './index.less';
import { useSearchParams } from '@/hooks/useSearchParams';
import InfiniteList from '@/components/InfiniteList';
import chatRobotBg from '@/assets/images/chat_robot_top.png';
import { history, useModel, useRequest } from '@umijs/max';
import { Avatar, Button } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import { searchArticle } from '@/services/article';
import { useLazyList, useTable } from '@/hooks/index';
import { searchUser } from '@/services/user/user';
import FollowButton from '@/components/FollowButton';

const items = [
    {
        label: '文章',
        value: 'article',
    },
    {
        label: '用户',
        value: 'user',
    },
]

export default () => {
    const { query='', type = items[0].value } = useSearchParams();
    const { list, nextPage, loading, pageParams,refreshPage } = useLazyList({ api: type==='user'?searchUser:searchArticle, extraParams: { value:query??''},manual:true,fieldParams:{
        pageSize:'size',
        pageCurrent:'current',
        totalCount:'totalCount',
    }})
    const regExpText = useCallback((text:string)=>{
        return text?.replace?.(
            new RegExp(query, 'g'),
            `<span style="color:rgb(232, 0, 28)">${query}</span>`
          )
    },[query])
    useEffect(()=>{
        refreshPage() 
    },[query,type])
    const articleRender = useCallback((item:any,index:any)=>{
        return <div key={index} className={styles.item} onClick={() => {
            history.push(`/view/${item.id}`)
        }}>
            <div className={styles.left}>
                <div className={styles.title}  dangerouslySetInnerHTML={{
                      __html:regExpText(item.title||'') }} ></div>
                <div className={styles.desc} dangerouslySetInnerHTML={{
                      __html:regExpText(item.summary||'') }}></div>
                <div className={styles.otherContainer}>
                    <div className={styles.metaContainer}>
                        <span className={styles.userName}>{item.nickname}</span>
                        <span className={styles.numberInfo} ><i className='iconfont icon-browse' />{item.views||0}</span>
                        <span className={styles.numberInfo} ><i className='iconfont icon-a-Property1youbangzhuProperty2weixuanzhong' />{item.likes||0}</span>
                    </div>
                    <div className={styles.tagContainer}>

                    </div>
                </div>
            </div>
            {
                item.images&&<img className={styles.image} src={item.images} alt="" />
              }
        </div>
    },[query])
    const userRender = useCallback((item:any,index:any)=>{
        return <div key={index} className={styles.item} onClick={() => {
            history.push(`/user/${item.id}`)
        }}>
             <Avatar size={32} icon={<UserOutlined />} src={item.avatar} />
            <div className={styles.left}>
                <div className={styles.title}
                 dangerouslySetInnerHTML={{
                      __html:regExpText(item.nickname) }}
                    ></div>
                {/* <div className={styles.desc}>{index}个粉丝</div> */}
            </div>
            <div className={styles.gzBtn}>
                <FollowButton  userId={item.id} isFollow={item?.isFollow} isMeRender={'自己'}/>
            </div>
            
        </div>
    },[query])
    return <div className={styles.box}>
        <div className={styles.container}>
            <div className={styles.tabs}>
                {
                    items.map((item) => <div key={item.value} className={type === item.value ? styles.active : ''} onClick={() => {
                        history.push(`/search?query=${query}&type=${item.value}`)
                    }}>
                        {item.label}
                    </div>)
                }
            </div>
            <div className={styles.list}>
                <InfiniteList
                    dataSource={list}
                    next={() => {
                        nextPage()
                    }}
                    loading={loading}
                    hasMore={list.length < pageParams.totalCount}
                    renderItem={type === 'article' ? articleRender:userRender}
                />
            </div>
        </div>
    </div>
}